<template>
	<div class='h-100'>
		<section class='relative bc-fff' style='padding:50px 0px;'>
			<el-form id='form' :model='formData' :rules='rules'  ref='form' label-width='100px' label-position='left'>
				<el-form-item label='设备类型' prop='charge_mode'>
					<mselect :count='2' :initValues='[formData.device_type || "", formData.charge_mode || ""]' url='Device/deviceType' valueField='value' queryName='type' v-on:select='formData.device_type=$event[0];formData.charge_mode=$event[1];'></mselect>
				</el-form-item>
				<el-form-item v-if='role == 1' label='SIM ICCID' prop='sim_iccid'>
					<el-input v-model='formData.sim_iccid' type='text' autocomplete='off'></el-input>
				</el-form-item>
				<el-form-item v-if='role == 1' label='端口数' prop='port_number'>
					<el-input v-model='formData.port_number' type='text' autocomplete='off'></el-input>
				</el-form-item>
				<el-form-item v-if='role == 1' label='所属网关' prop='gateway'>
					<el-select v-model='formData.gateway' filterable placeholder='请选择' style='width:100%'>
						<el-option
						v-for='item in gatewayList'
						:key='item.gateway'
						:label='item.name'
						:value='item.gateway'>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-if='role == 1' label='代理商'>
					<el-select v-model='formData.agent_id' filterable placeholder='请选择' style='width:100%'>
						<el-option
							v-for='item in agentList'
							:key='item.agent_id'
							:label='item.agent_name'
							:value='item.agent_id'>
						</el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item label='支付方式' prop='payTyp'>
					<el-checkbox-group :disabled='checkPermission("agent")' v-model='formData.payType'>
						<el-checkbox v-for='(item, key) in payTypes' :label='Number(key)' :value='Number(key)' :key='Number(key)'>{{item}}</el-checkbox>
					</el-checkbox-group>
				</el-form-item> -->
				<el-form-item label='投币报警数'>
					<el-input v-model='formData.coin_limit' type='text' autocomplete='off'></el-input>
				</el-form-item>
				<el-form-item label='充电套餐'>
					<el-select v-model='formData.price_id' filterable placeholder='请选择' style='width:100%'>
						<el-option
						v-for='item in priceList'
						:key='item.price_id'
						:label='item.price_name'
						:value='item.price_id'>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label='通讯方式' prop='network_type'>
					<el-select v-model='formData.network_type' filterable placeholder='请选择' style='width:100%'>
						<el-option
						v-for='(item, key) in networkTypeList'
						:key='Number(key)'
						:label='item'
						:value='Number(key)'>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label='流量费'>
					<el-input v-model='formData.sim_fee' type='text' autocomplete='off'></el-input>
				</el-form-item>
				<el-form-item label='下次缴费时间'>
					<el-date-picker
						style='width:100%;'
						v-model='formData.sim_expire'
						type='date'
						value-format='yyyy-MM-dd'
						placeholder='选择日期'>
					</el-date-picker>
				</el-form-item>
				<el-form-item label='设备名称'>
					<el-input v-model='formData.device_name' type='text' autocomplete='off'></el-input>
				</el-form-item>
				<el-form-item label='所在地区'>
					<mselect :count='3' :initValues='[formData.province_id || "", formData.city_id || "", formData.district_id || ""]' url='area/getArea' queryName='id' v-on:select='formData.province_id=$event[0];formData.city_id=$event[1];formData.district_id=$event[2]'></mselect>
				</el-form-item>
				<el-form-item label='详细地址'>
					<el-input v-model='formData.address' type='text' autocomplete='off'></el-input>
				</el-form-item>
				<!-- <el-form-item label='经纬度'>
					<el-col :span='11'>
						<el-input v-model='formData.longitude' type='text' placeholder='经度' autocomplete='off'></el-input>
					</el-col>
					<el-col class='text-center' :span='2'>&nbsp;</el-col>
					<el-col :span='11'>
						<el-input v-model='formData.latitude' type='text' placeholder='纬度' autocomplete='off'></el-input>
					</el-col>
				</el-form-item> -->
				<el-form-item label='备注'>
					<div class='relative'>
						<el-input type='textarea' :rows='5' v-model='formData.remarks' :maxlength='500'></el-input>
						<div style='position:absolute;right:10px;bottom:5px;'>{{formData.remarks.length}}/50</div>
					</div>
				</el-form-item>
				<el-form-item label=''>
					<el-button @click='$router.go(-1)'>返回</el-button>
					<el-button @click='submit' class='m-l-20' type='primary'>保存</el-button>
				</el-form-item>
			</el-form>
		</section>
	</div>
</template>

<script src='./add.js'></script>

<style lang='less' scoped>
	#form{
		width:800px;
		margin:auto;
	}
</style>